<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/detail.css">
		<link rel="stylesheet" href="css/common.css">
	</head>

	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">垃圾分类</h1>
			</header>
			<section>
				<h1>匹配结果</h1>
				<div class="detail-title" id="detailTitle">
					
				</div>
					
				<div class="detail-list">
					<p>您可能要找到的是</p>
					<ul class="mui-table-view" id="detailList">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									<div>瓜子</div>
									<div>干垃圾</div>
								</a>
							</li>
							
						</ul>
				</div>
			</section>
		</div>
	</body>
	
	<script src="js/mui.js"></script>
	<script src="js/flexible.js"></script>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function(){
			/* 获取语音传过来的参数 */
			var self = plus.webview.currentWebview();
			var title = decodeURI(self.title);
			/* 获取接口数据 */
			mui.ajax('http://apis.juhe.cn/rubbish/search',{
				data:{
					key:'dfe7a5dc90a9be32d35d15d5a06eb619',
					q:title
				},
				success:function(data){
					var result = data.result;
					if ( !result ){
						mui("#detailTitle")[0].innerHTML =
						`
						<p id="rubbishName">小编还不知道该垃圾</p>
						<h3>未知垃圾</h3>
						`;
						return false;
					}else {
						mui.each(result,function(index,item){
							if ( item.itemName == title){
								mui("#detailTitle")[0].innerHTML =
								`
								<p id="rubbishName">${item.itemName}</p>
								<h3>${item.itemCategory}</h3>
								`;
							}else {
								mui("#detailList")[0].innerHTML += `<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									<div>${item.itemName}</div>
									<div>${item.itemCategory}</div>
								</a>
							</li>`
							}
						})
					}
				}
			}) 
		})
	</script>
</html>
